<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBackHome"></a>
			<a v-if="Role == 3" id="menu" class="mui-action-menu mui-icon mui-icon-more-filled mui-pull-right" href="#topPopover"></a>
			<h1 class="mui-title">{{title}}</h1>
		</header>
		<div class="mui-content mui-fullscreen">
			<div style="padding: 10px;padding-bottom: 0;">
				<div class="title">报表统计分析</div>
				<div id="round_chart" class="chart">

				</div>
				<ul class="timeTab" style="margin-top: 10px;">
					<li :class="{timeActive:index == curIndex}" v-for="item,index in timeList" @click="changeTime(index)">{{item}}</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
					<li class="mui-table-view-cell mui-collapse myCollapse">
							<span>未打卡</span>
							<span class="mui-pull-right" style="margin-right: 5px;">{{Number(dayList.notSign)}} 人次</span>
					</li>
					<li class="mui-table-view-cell mui-collapse myCollapse">
							<span>打卡</span>
							<span class="mui-pull-right" style="margin-right: 5px;">{{Number(dayList.HasSign)}} 人次</span>
					</li>
				</ul>
			</div>
		</div>
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper" style="height: 300px;margin: 0;">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li :class="{'mui-active':classIndex == index && show}" class="mui-table-view-cell" v-for="(list,index) in classList" @click="changeClass(list.ClassID,list.ClassName,index)">
							<a>{{list.ClassName}}</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		teacherClass,
		getStudentCount,
		getIsHeadTeacher
	} from '@/service/getData'
	export default {
		data() {
			return {
				title: '学生报表统计',
				timeList: ["当天", "当周", "当月"],
				classList: [],
				curIndex: 0,
				classIndex: 0,
				dayList: {
					notSign: 0,
					HasSign: 0
				},
				Role: "",
				Type: "",
				UserId: "",
				ClassId: "",
				show:false
			}
		},
		created() {
			let self = this;
			self.Type = self.$route.params.Type;
			self.UserId = self.$route.params.UserId;
			getIsHeadTeacher({
				userId: self.UserId
			}).then((res) => {
				if(res.code == 1) {
					if(res.data) {
						self.Role = 3;
						if(self.Role == 3) {
							teacherClass({
								UserId: self.UserId,
								Type: 2
							}).then((res) => {
								mui('.mui-scroll-wrapper').scroll();
								self.classList = res.data;
								self.drawLine(self.Type, self.ClassId)
							})
						} 
					}
				}else {
							self.Role = 10
							self.drawLine(self.Type, self.ClassId)
						}
			})
			self.curIndex = self.Type;
		},
		mounted() {

		},
		methods: {
			changeTime(index) {
				let self = this;
				self.curIndex = index;
				switch(index) {
					case 0:
						{
							self.Type = index;
							self.drawLine(index, self.ClassId)
						}
						break;
					case 1:
						{
							self.Type = index;
							self.drawLine(index, self.ClassId)
						}
						break;
					case 2:
						{
							self.Type = index;
							self.drawLine(index, self.ClassId)
						}
						break;
				}
			},
			changeClass(id, name, index) {
				let self = this;
				self.ClassId = id;
				self.classIndex = index;
				self.show = true;
				self.drawLine(self.Type, id);
				mui('#topPopover').popover('hide');
			},
			//绘制图表
			drawLine(index, classId) {
				let self = this;
				getStudentCount({
					userId: self.UserId,
					role: self.Role,
					type: index,
					classId: classId
				}).then((res) => {
					//					console.log(res)
					// 指定图表的配置项和数据
					if(res.code == 1) {
						self.dayList = res.data;
						let option = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b}: {c} ({d}%)"
							},
							legend: {
								show: true,
								orient: 'horizontal',
								x: 'center',
								//						y: '300',
								y: 200,
								itemGap: 55,
								data: [{
										name: '未打卡',
										icon: 'emptyCircle',
									},
									{
										name: '打卡',
										icon: 'emptyCircle'
									}
								]
							},
							series: [{
								name: '报表统计',
								type: 'pie',
								radius: ['40%', '70%'],
								center: ['50%', '40%'],
								avoidLabelOverlap: false,
								label: {
									normal: {
										show: false,
										position: 'center'
									},
									emphasis: {
										show: true,
										textStyle: {
											fontSize: '17',
											fontWeight: 'bold'
										}
									}
								},
								labelLine: {
									normal: {
										show: false
									}
								},
								data: [{
										value: 21,
										name: '未打卡'
									},
									{
										value: 12,
										name: '打卡'
									}
								]
							}],
							color: ['#3498db', '#fad232']
						};
						let myChart = this.$echarts.init(document.getElementById('round_chart'));
						option.series[0].data[0].value = Number(res.data.notSign);
						option.series[0].data[1].value = Number(res.data.HasSign);
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					} else {
						let option = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b}: {c} ({d}%)"
							},
							legend: {
								show: true,
								orient: 'horizontal',
								x: 'center',
								//						y: '300',
								y: 200,
								itemGap: 55,
								data: [{
										name: '未打卡',
										icon: 'emptyCircle',
									},
									{
										name: '打卡',
										icon: 'emptyCircle'
									}
								]
							},
							series: [{
								name: '报表统计',
								type: 'pie',
								radius: ['40%', '70%'],
								center: ['50%', '40%'],
								avoidLabelOverlap: false,
								label: {
									normal: {
										show: false,
										position: 'center'
									},
									emphasis: {
										show: true,
										textStyle: {
											fontSize: '17',
											fontWeight: 'bold'
										}
									}
								},
								labelLine: {
									normal: {
										show: false
									}
								},
								data: [{
										value: 21,
										name: '未打卡'
									},
									{
										value: 12,
										name: '打卡'
									}
								]
							}],
							color: ['#3498db', '#fad232']
						};
						let myChart = this.$echarts.init(document.getElementById('round_chart'));
						option.series[0].data[0].value = 0;
						option.series[0].data[1].value = 0;
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						mui.toast(res.msg);
					}
				}).catch((err) => {
					mui.toast("访问异常，尝试重新访问")
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		background-color: #fff;
		font-size: 15px;
	}
	
	.timeTab {
		border-bottom: 1px solid #dfdfdf;
	}
	
	.timeTab li {
		width: 33.3%;
		border-top: none;
		border-right: none;
		font-size: 15px;
	}
	
	.timeTab li:nth-child(1) {
		text-align: left;
		padding-left: 20px;
	}
	
	.timeTab li:nth-child(3) {
		text-align: right;
		padding-right: 20px;
	}
	
	.timeTab li.timeActive {
		background-color: #fff;
		border-bottom: 3px solid #1883d5;
		color: #333;
	}
	
	.timeTab li:last-child {
		border-top: none;
		border-right: none;
		background-color: #fff;
	}
	
	.myCollapse a {
		font-size: 15px;
	}
	
	.mui-table-view-cell {
		font-size: 15px;
	}
	
	.mui-table-view-cell:after {
		background-color: #dfdfdf;
	}
	
	.mui-table-view:after,
	.mui-table-view:before {
		background-color: #dfdfdf;
	}
	
	.mui-table-view-cell>a:not(.mui-btn).mui-active {
		background-color: #eee;
	}
</style>